<%--<%@ page import="java.sql.DriverManager" %>--%>
<%--<%@ page import="java.sql.Connection" %>--%>
<%--<%@ page import="java.sql.Statement" %>--%>
<%--<%@ page import="java.sql.ResultSet" %>--%>
<%--<%@ page import="com.gzsz.util.DBUtil" %>--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <Title>用户表格</Title>--%>
<%--    <meta charset="UTF-8">--%>
<%--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">--%>
<%--</head>--%>
<%--<style>--%>
<%--    body {--%>
<%--        font-family: Arial, sans-serif;--%>
<%--        background-color: #f4f4f4;--%>
<%--        margin-bottom: 20%;--%>
<%--    }--%>
<%--    a {--%>
<%--        display: inline-block;--%>
<%--        padding: 6px 12px;--%>
<%--        margin-right: 5px;--%>
<%--        text-decoration: none;--%>
<%--        border: 1px solid #ccc;--%>
<%--        border-radius: 4px;--%>
<%--        color: #333;--%>
<%--        background-color: #f9f9f9;--%>
<%--        transition: all 0.3s ease;--%>
<%--        /* 将<a>标签设置为内联块元素，设置内边距、右边距，去除默认下划线，--%>
<%--           设置边框、边框圆角、文本颜色、背景颜色，并添加过渡效果，使样式变化更平滑 */--%>
<%--    }--%>

<%--    a:hover {--%>
<%--        background-color: #adadad;--%>
<%--        border-color: #adadad;--%>
<%--        color: #000;--%>
<%--        cursor: pointer;--%>
<%--        /* 鼠标悬停在<a>标签上时，改变背景颜色、边框颜色、文本颜色，--%>
<%--           并将鼠标指针样式改为指针形状，提示用户可点击 */--%>
<%--    }--%>
<%--</style>--%>
<%--<body>--%>
<%--<div>--%>
<%--    <table class="table table-bordered table-striped table-hover">--%>
<%--        <thead>--%>
<%--        <tr>--%>
<%--            <th>编号</th>--%>
<%--            <th>姓名</th>--%>
<%--            <th>密码</th>--%>
<%--            <th>用户身份</th>--%>
<%--            <th>数据操作</th>--%>
<%--        </tr>--%>
<%--        </thead>--%>
<%--        <tbody>--%>
<%--&lt;%&ndash;        <div style="float: right;margin-right:50px";>&ndash;%&gt;--%>
<%--&lt;%&ndash;            <a href="yonghuguanli.jsp">添加</a>&ndash;%&gt;--%>
<%--&lt;%&ndash;        </div>&ndash;%&gt;--%>
<%--&lt;%&ndash;        <div style="";>&ndash;%&gt;--%>
<%--&lt;%&ndash;            <a href="yonghuguanli.jsp">查询</a>&ndash;%&gt;--%>
<%--&lt;%&ndash;        </div>&ndash;%&gt;--%>

<%--        <%--%>
<%--            DBUtil dbUtil=new DBUtil();--%>
<%--            //    1：加载驱动（加载我们代码里面）--%>
<%--//            Class.forName("com.mysql.cj.jdbc.Driver");--%>
<%--////    2：创建连接--%>
<%--//            String url = "jdbc:mysql://localhost:3306/medicald?serverTimezone=Asia/Shanghai";--%>
<%--//            String user = "root";--%>
<%--//            String password = "123456";--%>
<%--//            Connection connection= DriverManager.getConnection(url,user,password );--%>
<%--////            out.println(connection);--%>
<%--////    3：创建命令对象--%>
<%--//            Statement statement=connection.createStatement();--%>
<%--//            4：执行命令对象，返回结果--%>
<%--//    4-1：查询--%>
<%--            String sql="select id,Name, Password,Role from yonghu;";--%>
<%--            ResultSet resultSet = dbUtil.queryBySQL(sql);// 执行SQL查询，并获取结果集--%>
<%--            while (resultSet.next()){%>--%>
<%--        <tr>--%>
<%--            <td><%=resultSet.getInt("id")%></td>--%>
<%--            <td><%=resultSet.getString("Name")%></td>--%>
<%--            <td><%=resultSet.getString("Password")%></td>--%>
<%--            <td><%=resultSet.getString("Role")%></td>--%>
<%--            <td> <a href="YongHuDelete.jsp?id=<%=resultSet.getInt("id")%>" onclick="return confirm('是否删除这条记录')">删除</a>--%>
<%--                 <a href="YongHuDelete.jsp?id=<%=resultSet.getInt("id")%>">编辑</a></td>--%>
<%--        </tr>--%>

<%--        <%--%>
<%--            }--%>
<%--            resultSet.close();--%>
<%--//            statement.close();--%>
<%--//            connection.close();--%>
<%--        %>--%>
<%--        </tbody>--%>
<%--    </table>--%>
<%--</div>--%>
<%--</body>--%>
<%--</html>--%>

<%--<%@ page import="java.sql.DriverManager" %>--%>
<%--<%@ page import="java.sql.Connection" %>--%>
<%--<%@ page import="java.sql.Statement" %>--%>
<%--<%@ page import="java.sql.ResultSet" %>--%>
<%--<%@ page import="com.gzsz.util.DBUtil" %>--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <Title>用户表格</Title>--%>
<%--    <meta charset="UTF-8">--%>
<%--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">--%>
<%--</head>--%>
<%--<style>--%>
<%--    body {--%>
<%--        font-family: Arial, sans-serif;--%>
<%--        background-color: #f4f4f4;--%>
<%--        margin-bottom: 20%;--%>
<%--    }--%>
<%--    a {--%>
<%--        display: inline-block;--%>
<%--        padding: 6px 12px;--%>
<%--        margin-right: 5px;--%>
<%--        text-decoration: none;--%>
<%--        border: 1px solid #ccc;--%>
<%--        border-radius: 4px;--%>
<%--        color: #333;--%>
<%--        background-color: #f9f9f9;--%>
<%--        transition: all 0.3s ease;--%>
<%--    }--%>

<%--    a:hover {--%>
<%--        background-color: #adadad;--%>
<%--        border-color: #adadad;--%>
<%--        color: #000;--%>
<%--        cursor: pointer;--%>
<%--    }--%>
<%--</style>--%>
<%--<body>--%>
<%--<form action="" method="get">--%>
<%--    <input type="text" name="search" placeholder="输入用户信息查询">--%>
<%--    <input type="submit" value="查询">--%>
<%--</form>--%>
<%--<div>--%>
<%--    <table class="table table-bordered table-striped table-hover">--%>
<%--        <thead>--%>
<%--        <tr>--%>
<%--            <th>编号</th>--%>
<%--            <th>姓名</th>--%>
<%--            <th>密码</th>--%>
<%--            <th>用户身份</th>--%>
<%--            <th>数据操作</th>--%>
<%--        </tr>--%>
<%--        </thead>--%>
<%--        <tbody>--%>
<%--        <%--%>
<%--            DBUtil dbUtil = new DBUtil();--%>
<%--            String search = request.getParameter("search");--%>
<%--            String sql;--%>
<%--            if (search != null && !search.isEmpty()) {--%>
<%--                sql = "select id,Name, Password,Role from yonghu where Name like '%" + search + "%' or Role like '%" + search + "%';";--%>
<%--            } else {--%>
<%--                sql = "select id,Name, Password,Role from yonghu;";--%>
<%--            }--%>
<%--            ResultSet resultSet = dbUtil.queryBySQL(sql);--%>
<%--            while (resultSet.next()) {--%>
<%--        %>--%>
<%--        <tr>--%>
<%--            <td><%=resultSet.getInt("id")%></td>--%>
<%--            <td><%=resultSet.getString("Name")%></td>--%>
<%--            <td><%=resultSet.getString("Password")%></td>--%>
<%--            <td><%=resultSet.getString("Role")%></td>--%>
<%--            <td>--%>
<%--                <a href="YongHuDelete.jsp?id=<%=resultSet.getInt("id")%>" onclick="return confirm('是否删除这条记录')">删除</a>--%>
<%--                <a href="YongHuDelete.jsp?id=<%=resultSet.getInt("id")%>">编辑</a>--%>
<%--            </td>--%>
<%--        </tr>--%>
<%--        <%--%>
<%--            }--%>
<%--            resultSet.close();--%>
<%--        %>--%>
<%--        </tbody>--%>
<%--    </table>--%>
<%--</div>--%>
<%--</body>--%>
<%--</html>--%>



<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="com.gzsz.util.DBUtil" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <Title>用户表格</Title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 自定义动画 */
        .animate-fade-in {
            animation: fadeIn 0.3s ease-out;
        }
        /*@keyframes fadeIn {*/
        /*    from { opacity: 0; }*/
        /*    to { opacity: 1; }*/
        /*}*/
    </style>
</head>
<body class="bg-gray-100 font-sans">
<div class="container mx-auto py-8 px-4">
    <div class="flex justify-between items-center mb-4">
        <form action="YongHu.jsp" method="get" class="flex space-x-2">
            <input type="text" name="search" placeholder="输入用户信息查询" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
            <input type="submit" value="查询" class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 transition-colors">
        </form>
        <div class="flex items-center">
            <button id="addUserBtn" class="bg-green-500 text-white rounded-md px-4 py-2 hover:bg-green-600 transition-colors">添加信息</button>
            <!-- 添加返回按钮 -->
            <a href="#" id="backBtn" class="ml-2 text-gray-500 hover:text-gray-700 transition-colors">
                <i class="fa-solid fa-angle-left"></i> 返回
            </a>
        </div>
    </div>

    <!-- 模态框 -->
    <div id="myModal" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden flex justify-center items-center z-50">
        <div class="bg-white rounded-md p-6 w-full max-w-md animate-fade-in">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold">添加用户信息</h2>
                <span class="close text-gray-500 hover:text-gray-700 cursor-pointer">&times;</span>
            </div>
            <form action="GETyonghuguanli.jsp" method="post" class="space-y-4">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">姓名:</label>
                    <input type="text" id="name" name="Name" required class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 w-full">
                </div>
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700">密码:</label>
                    <input type="password" id="password" name="Password" required class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 w-full">
                </div>
                <div>
                    <label for="Role" class="block text-sm font-medium text-gray-700">用户角色:</label>
                    <select id="Role" name="Role" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 w-full">
                        <option value="医护人员">医护人员</option>
                        <option value="管理员">管理员</option>
                    </select>
                </div>
                <div>
                    <input type="submit" value="添加用户" class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 transition-colors">
                </div>
            </form>
        </div>
    </div>

    <div class="bg-white rounded-md shadow-md overflow-x-auto">
        <table class="table-auto w-full">
            <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">编号</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">密码</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户身份</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据操作</th>
            </tr>
            </thead>
            <tbody>
            <%
                DBUtil dbUtil = new DBUtil();
                String search = request.getParameter("search");
                String sql;
                if (search != null && !search.isEmpty()) {
                    sql = "select id,Name, Password,Role from yonghu where Name like '%" + search + "%' or Role like '%" + search + "%';";
                } else {
                    sql = "select id,Name, Password,Role from yonghu;";
                }
                ResultSet resultSet = dbUtil.queryBySQL(sql);
                while (resultSet.next()) {
            %>
            <tr class="border-b hover:bg-gray-50 transition-colors">
                <td class="px-6 py-4"><%=resultSet.getInt("id")%></td>
                <td class="px-6 py-4"><%=resultSet.getString("Name")%></td>
                <td class="px-6 py-4"><%=resultSet.getString("Password")%></td>
                <td class="px-6 py-4"><%=resultSet.getString("Role")%></td>
                <td class="px-6 py-4">
                    <a href="YongHuDelete.jsp?id=<%=resultSet.getInt("id")%>" onclick="return confirm('是否删除这条记录')" class="text-red-500 hover:text-red-600 transition-colors">
                        <i class="fa-solid fa-trash"></i> 删除
                    </a>
                    <a href="YiZhuDelete.jsp"
                       class="text-yellow-500 hover:text-yellow-600 transition-colors ml-2">
                        <i class="fa-solid fa-pen-to-square"></i>编辑
                    </a>
                </td>
            </tr>
            <%
                }
                resultSet.close();
            %>
            </tbody>
        </table>
    </div>
</div>

<script>
    // 获取模态框
    var modal = document.getElementById("myModal");
    // 获取打开模态框的按钮
    var btn = document.getElementById("addUserBtn");
    // 获取关闭模态框的 <span> 元素
    var span = document.getElementsByClassName("close")[0];
    // 获取返回按钮
    var backBtn = document.getElementById("backBtn");

    // 当用户点击按钮时，打开模态框
    btn.onclick = function() {
        modal.classList.remove('hidden');
    }

    // 当用户点击 <span> (x) 时，关闭模态框
    span.onclick = function() {
        modal.classList.add('hidden');
    }

    // 当用户在模态框外点击时，关闭模态框
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.classList.add('hidden');
        }
    }

    // 当用户点击返回按钮时，清空查询参数并重新加载页面
    backBtn.onclick = function(event) {
        event.preventDefault();
        window.location.href = "YongHu.jsp";
    };
</script>
</body>
</html>
